/* eslint-disable */
<template>
  <div class="hello">
    <h1 ref="h1">{{ msg }}</h1>
    <button @click="changeData">点我改变值</button>
    <div>{{childMsg}} {{obj.name}}</div>
    <!-- <ul>
      <li v-for="(item, index) in arrayLike" :key="item">{{item}} {{key}} {{index}}</li>
    </ul> -->
    <img src="https://hm.baidu.com/" alt="">
    <!-- <form action="http://127.0.0.1:5500/test1.html?dasod=jjj">
      <input type="text" name="zze" id="">
    </form> -->
    <span>{{test.name}}</span>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['getMsg', 'test'],
  inject: ['appMsg', 'obj'],
  computed: {
    childMsg() {
      return this.appMsg()
    }
  },
  data() {
    return {

      msg: '999',
      arrayLike: {
        a: 4,
        b: 5,
        c: 6,
       
      }
    }
  },
  beforeCreate() {
  },
  beforeUpdate() {
    console.log(this.msg);
  },
  methods: {
    changeData() {
      // this.getMsg()
      // this.$eventbus.$emit('child')
      this.test = {
        name: '9999999999'
      }
      this.obj.name = 1000
      // document.forms[0].submit()
      console.log(typeof this.appMsg);
      // this.msg = 10
      // setTimeout(() => {
      //   console.log('1111');
      // })
      // Promise.resolve().then(() => {
      //   console.log('2222');
      // })
      // this.$nextTick(() => {
      //   console.log('3333');
      //   console.log(this.$refs.h1);
      // })
      // Promise.resolve().then(() => {
      //   console.log('4444');
      // })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
